<template>
  <div class="com-container">
    <!-- :style="popheight+'px'" :style="RiskWidth" -->
    <div class="com-chart com-charts" ref="echarts" style="z-index:555;position: relative;"></div>
  </div>
</template>

<script>
export default {
  props: ["commonData"],
  data() {
    return {
      chartInstance: null,
      allData: null, // 服务器返回的数据
    };
  },
  watch: {
    commonData: function (a, b) {
      this.initChart(a);
    },
  },

  mounted() {
    setTimeout(() => {
      // this.initChart();
      // this.getData();
      window.addEventListener("resize", this.screenAdapter);
      // 在页面加载完成的时候, 主动进行屏幕的适配
      this.screenAdapter();
    }, 20);
  },

  destroyed() {
    // 在组件销毁的时候, 需要将监听器取消掉
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    initChart(a) {
      this.chartInstance = this.$echarts.init(this.$refs.echarts);

      const initOption = {
        title: {


          text: a.ExcessRate + "%",
          subtext: '超标闭合率',
          x: 'center',
          y: '35%',
          textStyle: {

            color: '#fff',
          },
          subtextStyle: {

            align: "center",
            color: '#fff'
          },
        },
        color: ['rgba(0, 42, 130, 0.3)'],
        legend: {
          show: false,

        },

        series: [{
          name: 'Line 1',
          type: 'pie',
          clockWise: true,
          radius: ['65%', '85%'],
          itemStyle: {
            normal: {
              label: {
                show: false
              },
              labelLine: {
                show: false
              }
            }
          },
          hoverAnimation: false,
          data: [{
            value: a.ExcessRate,
            name: '01',
            itemStyle: {
              normal: {
                color: '#F1B144',
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            }
          }, {
            name: '02',
            value: 100-a.ExcessRate
          }]
        }]
      }
      //   图表大小自适应
      //   this.$echartsResize(myChart);
      this.chartInstance.setOption(initOption);
      //   tools.loopShowTooltip(this.chartInstance, initOption, {
      //     loopSeries: true,
      //   });
    },
    getData() {
      // console.log(555,this.commonData.ExcessRate);
      // this.reportData = {
      //   PassNum: 20,
      //   NotPassNum: 40,
      //   AllNum: 60
      // }
      this.allData = this.commonData.ExcessRate


      var that = this

      setTimeout(() => {
        // that.updateChart(this.allData);
      }, 500)
    },
    updateChart(data) {

      var dataOption = {
        title: {


          text: data + "%",
        }
        , series: [{

          data: [{
            value: data,
            name: '01',

          }, {
            name: '02',
            value: 100-data
          }]
        }]
      };

      this.chartInstance.setOption(dataOption);
    },
    // 当浏览器的大小发生变化的时候, 会调用的方法, 来完成屏幕的适配
    screenAdapter() {
      const titleFontSize = (this.$refs.echarts.offsetWidth / 100) * 6;
      // console.log(titleFontSize);

      //   和分辨率大小相关的配置项
      const adapterOption = {
        title: {



          textStyle: {
            fontSize: titleFontSize,

          },
          subtextStyle: {
            fontSize: titleFontSize,

          },
        },


      };
      this.chartInstance.setOption(adapterOption);
      // 手动的调用图表对象的resize 才能产生效果
      this.chartInstance.resize();
    },
  },
};
</script>

<style lang="less" scope>
.com-chart::after {
  //     display: block;
  //     content: "123";
  //     position: absolute;
  //     left: 0;
  //     top: 0;
  //   width: 50px;
  //   height: 40px;
  //   border: 1px solid red;
  //   z-index: 9999;
}

.com-charts ::after {
  //   display: block;
  //   content: "123";
  //   position: absolute;
  //   transform: translate(-50%,-50%);
  //   left: 50%;
  //   top: 60%;
  // width: 47%;
  // height: 90%;

  // z-index: 9999;
}
</style>
